import React from 'react'
import { withRouter, RouteComponentProps } from 'react-router-dom'
import PageLoading from '../components/page-loading'
import NavTabBar from '../components/common/nav-tabbar'
import PositionTop from '../components/common/position-top'
import { Tabs, Button } from 'antd-mobile'
import '../assets/css/qa-detail.less'
import { qsList } from '../service/api'

class QaDetail extends React.Component<Props & RouteComponentProps, State> {
    constructor(props) {
        super(props)
        this.state = {
            loading: false,
            details: {},
            activityList: [],
            // @ts-ignore
            id: this.props.match.params.id,
        }
    }
    emptyOpt = {
        des: '暂无活动',
        btnText: '',
        btnLink: '/',
    }

    tabsOpt = [
        { title: '智能问答', sub: '1' },
        { title: '专家问答', sub: '2' },
        { title: '社区问答', sub: '3' },
    ]
    componentDidMount() {
        console.log(this.props.match.params, 111111111111)

        this.getList()
    }

    async getList() {
        // @ts-ignore
        let { status, result } = await qsList({})
        if (!status && !!result && !!result.list) {
            console.log(result, 'details', this.state.id)
            // @ts-ignore
            let details = this.state.id
                ? result.list.find((v) => v.id == this.state.id)
                : result.list[0]
            this.setState({
                details,
            })
        }
    }
    render() {
        const { activityList, loading, details } = this.state
        return (
            <>
                <div className="qa-detail-page">
                    <div className="qa-page-header">
                        <div className="qa-page-title">
                            <h1>{details.question}</h1>
                        </div>
                    </div>
                    <div className="qa-detail-body">
                        <h3 className="sub-title">{details.description}</h3>
                        <Tabs
                            tabs={this.tabsOpt}
                            onTabClick={(tab, index) => {
                                this.handleTabClick(tab, index)
                            }}
                        >
                            <div style={{ backgroundColor: '#fff' }}>
                                <Button
                                    className="matching-degree"
                                    size="small"
                                    inline
                                    type="primary"
                                >
                                    匹配度: 100
                                </Button>
                                <div className="content">{details.content}</div>
                            </div>
                            <div
                                style={{
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                    height: '150px',
                                    backgroundColor: '#fff',
                                }}
                            >
                                暂无数据~
                            </div>
                            <div
                                style={{
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                    height: '150px',
                                    backgroundColor: '#fff',
                                }}
                            >
                                暂无数据~
                            </div>
                        </Tabs>
                    </div>
                </div>
                {/* <PageLoading 
                    loading={loading}
                    loadingText="加载中..." 
                    empty={!activityList.length}
                    emptyOpt={this.emptyOpt}
                >
                </PageLoading> */}
                {/* <NavTabBar active={1}/> */}
            </>
        )
    }
    handleTabClick(tab, index) {
        console.log('onTabClick', index, tab)
    }

    getQaDataById(id: number) {}
}
export default withRouter(QaDetail)
